<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>学生选课管理系统</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="/assets/css/bootstrap.css" rel="stylesheet" />
        <link href="/assets/css/main.css" rel="stylesheet" />
        <link rel="stylesheet" href="/assets/css/iconfont.css">
        <link rel="stylesheet" href="/assets/css/tip-green.css">
        <link rel="stylesheet" href="/assets/css/my.css">
        <link rel="icon" href="/assets/img/ico/favicon.ico" type="image/png">
    </head>
    <body>
        <% include ../common/header.ejs %>
        <% include ../common/siderbar.ejs %>
        <div id="content">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 heading">
                        <ul class="nav nav-tabs">
                            <li><a href="/admin/course">课程清单</a></li>
                            <li><a href="/admin/course/import">导入课程</a></li>
                            <li class="active"><a href="javasctipt:;">逐个增加课程</a></li>
                        </ul>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">
                        <a id="show_tips" href="#"></a>
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="cid" class="col-sm-2 control-label">课程号</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="cid" placeholder="请输入课程编号" checkinvalid>
                                </div>
                                <div class="alert alert-info tips-cid" role="alert">课程号为 5 为数字</div>
                            </div>
                            <div class="form-group">
                                <label for="cname" class="col-sm-2 control-label">课程名</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="cname" placeholder="请输入课程名" checkinvalid>
                                </div>
                                <div class="alert alert-info tips-cname" role="alert">课程名可以为中英文混合输入</div>
                            </div>
                            <div class="form-group dayofweek">
                                <label class="col-sm-2 control-label">上课时间</label>
                                <div class="col-sm-4 dayofweek-con">
                                    <label class="radio-inline">
                                        <input type="radio" name="dayofweek" value="周一" checked checkinvalid> 周一
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="dayofweek" value="周二"> 周二
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="dayofweek" value="周三"> 周三
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="dayofweek" value="周四"> 周四
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="dayofweek" value="周五"> 周五
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="dayofweek" value="周六"> 周六
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="dayofweek" value="周日"> 周日
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="number" class="col-sm-2 control-label">限选人数</label>
                                <div class="col-sm-4">
                                    <input type="number" class="form-control" min="1" max="3000" id="number" placeholder="请输入限选人数" checkinvalid>
                                </div>
                                <div class="alert alert-info tips-number" role="alert">限选人数必须为1位或以上</div>
                            </div>
                            <div class="form-group" id="allow">
                                <label class="col-sm-2 control-label">年级</label>
                                <div class="col-sm-7 allow-type">
                                    <label class="radio-inline">
                                        <input type="checkbox" name="allow" value="初一"> 初一
                                    </label>
                                    <label class="radio-inline">
                                        <input type="checkbox" name="allow" value="初二"> 初二
                                    </label>
                                    <label class="radio-inline">
                                        <input type="checkbox" name="allow" value="初三"> 初三
                                    </label>
                                    <label class="radio-inline">
                                        <input type="checkbox" name="allow" value="高一"> 高一
                                    </label>
                                    <label class="radio-inline">
                                        <input type="checkbox" name="allow" value="高二"> 高二
                                    </label>
                                    <label class="radio-inline">
                                        <input type="checkbox" name="allow" value="高三"> 高三
                                    </label>
                                </div>
                                <div class="alert alert-info tips-allow" role="alert">请选择年级</div>
                            </div>
                            <div class="form-group">
                                <label for="teacher" class="col-sm-2 control-label">代课老师</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="teacher" placeholder="请输入代课老师" checkinvalid>
                                </div>
                                <div class="alert alert-info tips-teacher" role="alert">老师姓名只能为中文，不能包含数字和字母，长度为2-4位</div>
                            </div>
                            <div class="form-group">
                                <label for="briefintro" class="col-sm-2 control-label">课程描述</label>
                                <div class="col-sm-4">
                                    <!--<input type="text" class="form-control" id="briefintro" placeholder="请输入代课老师" checkinvalid>-->
                                    <textarea name="briefintro" id="briefintro" cols="70" rows="6"></textarea>
                                </div>
                                <div class="alert alert-info tips-briefintro" role="alert">请输入课程简介</div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-10">
                                    <button class="btn btn-success form-submit" disabled>保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="clearfix"></div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="/assets/js/bootstrap/bootstrap.js"></script>
        <script src="/assets/js/jquery.poshytip.js"></script>
    </body>
</html>
<script>
    $(function () {
        var valid_last = false;

        var valid = {
            cid: false,
            cname: false,
            teacher: false,
            number: false,
            briefintro: false,
            allow: true
        }

        // 校验课程号
        $("#cid").on("input", function () {
            var val = $(this).val();  //获取当前课程号输入框的值
            var reg = /^[\d]{5}$/    //课程号需为5位
            if (!reg.test(val)) {
                valid.cid = false;
                valid_last = false;
                $(".form-submit").attr('disabled', true);
                $(".tips-cid").removeClass('alert-success').addClass('alert-info').html('课程号格式不正确，需为 5 位数字');
                return
            }else {
                //校验课程号是否已经存在
                $.ajax({
                    url: '/course/' + val,
                    type: 'propfind',
                    success: function (data) {
                        if (data.result === 0) {
                            valid.cid = true
                            $(".tips-cid").removeClass('alert-info').addClass('alert-success').html('当前课程号可用！')
                            //实时更新按钮状态按钮
                            updateBtn(valid)

                        }else if (data.result === -2) {
                            valid.cid = false
                            // valid_last.cid = false
                            $(".tips-cid").removeClass('alert-success').addClass('alert-info').html('当前课程号已经被占用！')
                        }
                        else {
                            valid.cid = false
                            // valid_last.cid = false
                            $(".tips-cid").removeClass('alert-success').addClass('alert-info').html('当前课程号已经被占用！')
                        }

                    }
                })
            }

        })

        //校验课程名
        $('#cname').on('input', function () {
            if ($(this).val() === null && $(this).val === undefined) {
                valid.cname = false;
                $(".tips-cname").removeClass('alert-success').addClass('alert-info').html('课程名不能为空');
            }else {
                valid.cname = true;
                $(".tips-cname").removeClass('alert-info').addClass('alert-success').html('课程名输入正确')
            }

            updateBtn(valid)
        })

        //校验老师姓名
        $("#teacher").on("input", function () {
            var val = $(this).val();
            var reg = /^[\u4E00-\u9FA5]{2,4}$/;
            if (reg.test(val)) {
                valid.teacher = true;
                $(".tips-teacher").removeClass('alert-info').addClass('alert-success').html('姓名格式输入正确！')
            }else {
                valid.teacher = false;
                // valid_last.cid = false
                $(".tips-teacher").removeClass('alert-success').addClass('alert-info').html('姓名只能为中文，不能包含数字和字母，长度为2-4位');
            }

            updateBtn(valid)

        })

        //校验人数
        $('#number').on('input', function () {
            var num = ($(this).val())
            if (num >=1 && num <= 3000) {
                valid.number = true;
                $(".tips-number").removeClass('alert-info').addClass('alert-success').html('人数格式输入正确！')
            }else {
                valid.number = false;
                $(".tips-number").removeClass('alert-success').addClass('alert-info').html('请输入正确的人数，可填人数在1-3000之间');
            }

            updateBtn(valid)

        })

        //校验可选课班级
        var allow_input = $('#allow input[type=checkbox]');
        allow_input.on('change', function () {
            console.log(valid)
            let num = 0
            allow_input.each(function () {
                if (this.checked) {
                    num ++
                }
            })
            if (num === 0) {  //表示没有一个被选中
                valid.allow = false;
                $(".tips-allow").show().removeClass('alert-success').addClass('alert-info').html('请至少选择一个年级！');
            }else {
                valid.allow = true;
                $(".tips-allow").hide()
            }

            updateBtn(valid)

        })

        $('#briefintro').on('input', function () {
            var textareaval = $(this).val()
            if (textareaval === '' || textareaval === null) {
                $(".tips-briefintro").removeClass('alert-success').addClass('alert-info').html('课程简介不能为空！');
                valid.briefintro = false
            }else {
                $(".tips-briefintro").hide()
                valid.briefintro = true
            }
            updateBtn(valid)
        })

        //提交保存表单
        $(".form-submit").click(function () {

            // for (var key in valid) {
            //     if (valid[key]) {
            //         valid_last = true
            //     }else {
            //         valid_last = false
            //         break
            //     }
            // }

            // if (valid_last) {
            var cid = $("#cid").val();
            var cname = $("#cname").val();
            var number = $("#number").val();
            var teacher = $("#teacher").val();
            var briefintro = $("#briefintro").val();
            var dayofweek = $("input[name=dayofweek]:checked").val();

            // 获取选中的年级
            var allow = []
            $("input[name=allow]").each(function () {
                if (this.checked) {
                    allow.push(this.value)
                }
            })
            $.ajax({
                url: '/admin/course/add',
                type: 'post',
                data: {
                    cid,
                    cname,
                    number,
                    allow,
                    teacher,
                    briefintro,
                    dayofweek
                },
                traditional: true,
                success: function (data) {
                    var content = '';
                    if (data.result == "1") {
                        content = '添加课程信息成功'
                    } else {
                        content = data.resultData;
                        // return
                    }
                    $('#show_tips').poshytip({
                        content: content,
                        className: 'tip-green',
                        showOn: 'none',
                        alignTo: 'target',
                        alignX: 'inner-left',
                        offsetX: -10,
                    }).poshytip('show').poshytip('hideDelayed', 3000);
                    // $("#list").trigger("reloadGrid");

                    //添加成功后清空选择框
                    $("#cid").val('')
                    $("#cname").val('')
                    $("#teacher").val('')
                    $("#briefintro").val('')
                    $("#number").val('')
                    $("input[name=allow]").prop('checked', false)

                    $('.tips-cid').removeClass('alert-success').addClass('alert-info').html('课程号为 5 为数字')
                    $('.tips-cname').removeClass('alert-success').addClass('alert-info').html('课程名可以为中英文混合输入')
                    $('.tips-number').removeClass('alert-success').addClass('alert-info').html('')
                    $('.tips-number').removeClass('alert-success').addClass('alert-info').html('限选人数必须为1位或以上')
                    $('.tips-allow').removeClass('alert-success').addClass('alert-info').html('请选择年级')
                    $('.tips-teacher').removeClass('alert-success').addClass('alert-info').html('老师姓名只能为中文，不能包含数字和字母，长度为2-4位')

                    for (var key in valid) {
                        valid[key] = false
                    }

                    $(".form-submit").attr('disabled', true);
                }
            })
        })

        function updateBtn(valid) {
            // console.log(valid)
            var flag = 0
            for (var key in valid) {
                if (!valid[key]) {
                    break
                }
                flag ++;
            }
            if (flag === 6) {   //6表示valid的长度
                $(".form-submit").attr('disabled', false);
            }else {
                $(".form-submit").attr('disabled', true);
            }
        }

    })
</script>